<template>
  <div class="totalWorkOverView">
    <div class="contentView">
      <div class="herdertop">
        <img src="../../assets/top.png" alt="" class="topImg" />
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>员工管理</el-breadcrumb-item>
          <el-breadcrumb-item>员工排班总览</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div
        class="contentBox"
        v-loading="isloading"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-custom-class="loading_color"
        style="width: 100%;"
      >
        <div class="tableTop1">
          <div class="top1Left">
            <div class="titleLeft">员工排班总览</div>
            <div class="chooseCity" style="margin-right:15px;">
              <span>城市：</span>
              <el-select
                v-model="chooseCityCode"
                clearable
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in cityAndBusinessOptions"
                  :key="item.cityCode"
                  :label="item.cityName"
                  :value="item.cityCode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="chooseBusiness" style="margin-right:15px;">
              <span>商圈：</span>
              <el-select
                v-model="chooseBusinessCode"
                clearable
                placeholder="请选择"
                :popper-append-to-body="false"
                @visible-change="getBusinessOptions"
              >
                <el-option
                  v-for="item in currentBusinessOptions"
                  :key="item.areaCode"
                  :label="item.areaName"
                  :value="item.areaCode"
                >
                </el-option>
              </el-select>
            </div>
            <div class="chooseGoods">
              <span>商品：</span>
              <el-select
                v-model="chooseGoodsCode"
                clearable
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in goodsListOptions"
                  :key="item.goodsCode"
                  :label="item.goodsTitle"
                  :value="item.goodsCode"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="top1Right">
            <div class="checkGroup">
              <span
                :class="{ checkColor: checkModel === '1' }"
                @click="changeModel('1')"
                >今日</span
              >
              <span
                :class="{ checkColor: checkModel === '2' }"
                @click="changeModel('2')"
                >本周</span
              >
              <span
                :class="{ checkColor: checkModel === '3' }"
                @click="changeModel('3')"
                >本月</span
              >
            </div>
            <div>
              <!-- 周模式选择 -->
              <div class="week" v-if="checkModel === '2'">
                <div style="cursor:pointer;margin-right:8px;" @click="weekPrev">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="weekdate">
                  {{ `${weekstartTime} 至 ${weekendTime}` }}
                </div>
                <div style="cursor:pointer;margin-left:8px;" @click="weekNext">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <!-- 月模式选择 -->
              <div class="month" v-if="checkModel === '3'">
                <div
                  style="cursor:pointer;margin-right:8px;"
                  @click="monthPrev"
                >
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="weekdate">
                  {{ `${moment(monthstarttime).format("YYYY-MM")}` }}
                </div>
                <div style="cursor:pointer;margin-left:8px;" @click="monthNext">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <!-- 日模式选择 -->
              <div class="day" v-if="checkModel === '1'">
                <div style="cursor:pointer;margin-right:8px;" @click="dayPrev">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="weekdate">{{ daystarttime }}</div>
                <div style="cursor:pointer;margin-left:8px;" @click="dayNext">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
            <div style="cursor: pointer;color: #ff7f4c;" @click="goBackCurrent">
              {{ goBackText }}
            </div>
          </div>
        </div>
        <div
          class="tableTop2"
          style="display:flex;justify-content: space-between;"
        >
          <div style="display:flex;position:relative;align-items:center;">
            <div class="staffName" style="width:65px;font-size:12px;">
              员工名称：
            </div>
            <el-input
              placeholder="员工姓名"
              v-model="searchStaffName"
              class="staffInput"
            >
            </el-input>
            <!-- <i class="el-icon-search" @click="searchPeople"></i> -->
            <div
              class="staffName"
              style="width:72px;font-size:12px;margin-left:20px;"
            >
              员工手机号：
            </div>
            <el-input
              placeholder="员工手机号"
              v-model="staffPhone"
              class="staffInput"
              maxlength="11"
            >
            </el-input>
            <div
              class="staffName"
              style="width:65px;font-size:12px;margin-left:20px;"
            >
              选择时间：
            </div>
            <el-date-picker
              v-model="rangeTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              size="mini"
              class="chooseDate"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-button class="searchButton" @click="searchTable"
              >查询</el-button
            >
          </div>

          <div style="display:flex;align-items:center;font-size:12px;">
            <div class="img" style="margin:5px 5px 0 0;">
              <img src="./imgs/1.png" />
            </div>
            <div style="margin-right:10px;">不可约</div>
            <div
              style="width: 18px;height: 18px;background: #FF8043;opacity: 0.5;border-radius:50%;margin-right:5px;"
            ></div>
            <div style="margin-right:10px;">有单</div>
            <div
              style="width: 16px;height: 16px;background: #FFFFFF;border: 1px solid #E9E9E9;border-radius:50%;margin-right:5px;"
            ></div>
            <div>无</div>
          </div>
        </div>
        <div class="tables">
          <!-- 周排班 -->
          <div class="table1Box" v-if="checkModel === '2'">
            <el-table
              :data="table1Data"
              border
              style="width:100%;"
              :cell-class-name="changeTrStyle"
              @cell-click="cellClick"
              class="table1"
              ref="table1"
              id="table1Id"
              highlight-current-row
              @current-change="handleCurrentChangeWeek"
            >
              <el-table-column prop="name" label="姓名/时间" width="100" fixed>
                <template slot-scope="scope">
                  {{ scope.row.staffName }}
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in table1Data[0].allStaffSchedulingVoList"
                :key="index"
                :label="
                  `${moment(item.day).month() + 1}-${moment(item.day).date()}`
                "
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <!-- 无 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 3
                    "
                  >
                    <span>无</span>
                  </div>
                  <!-- 有单 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 2
                    "
                  >
                    <span>{{
                      scope.row.allStaffSchedulingVoList[index]
                        .allStaffSchedulingWorkOrderVoList
                        ? scope.row.allStaffSchedulingVoList[index]
                            .allStaffSchedulingWorkOrderVoList.length + "单"
                        : ""
                    }}</span>
                  </div>
                  <!-- 不可约（包含请假和休息日） -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus ==
                        1 ||
                        scope.row.allStaffSchedulingVoList[index].staffStatus ==
                          4
                    "
                  >
                    <img src="./imgs/1.png" style="vertical-align:middle" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 月排班 -->
          <div class="table2Box" v-if="checkModel === '3'">
            <el-table
              :data="table2Data"
              border
              style="width:100%;"
              :cell-class-name="changeTrStyle"
              @cell-click="cellClick"
              class="table2"
              ref="table2"
              id="table2Id"
              highlight-current-row
              @current-change="handleCurrentChangeMonth"
            >
              <el-table-column prop="name" label="姓名/时间" width="100" fixed>
                <template slot-scope="scope">
                  {{ scope.row.staffName }}
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in table2Data[0].allStaffSchedulingVoList"
                :key="index"
                :label="
                  `${moment(item.day).month() + 1}-${moment(item.day).date()}`
                "
                show-overflow-tooltip
                width="40"
              >
                <template slot-scope="scope">
                  <!-- 无 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 3
                    "
                  >
                    <span>无</span>
                  </div>
                  <!-- 有单 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 2
                    "
                  >
                    <span>{{
                      scope.row.allStaffSchedulingVoList[index]
                        .allStaffSchedulingWorkOrderVoList
                        ? scope.row.allStaffSchedulingVoList[index]
                            .allStaffSchedulingWorkOrderVoList.length + "单"
                        : ""
                    }}</span>
                  </div>
                  <!-- 不可约（包含请假和休息日） -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus ==
                        1 ||
                        scope.row.allStaffSchedulingVoList[index].staffStatus ==
                          4
                    "
                  >
                    <img src="./imgs/1.png" style="vertical-align:middle" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 日排班 -->
          <div class="table3Box" v-if="checkModel === '1'">
            <el-table
              :data="table3Data"
              border
              :cell-class-name="changeTrStyle"
              @cell-click="cellClick"
              class="table3"
              ref="table3"
              id="table3Id"
              highlight-current-row
              @current-change="handleCurrentChangeDay"
            >
              <el-table-column prop="name" label="姓名/时间" width="80" fixed>
                <template slot-scope="scope">
                  {{ scope.row.staffName }}
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in table3Data[0].allStaffSchedulingVoList"
                :key="index"
                :label="item.day"
                show-overflow-tooltip
                width="40"
              >
                <template slot-scope="scope">
                  <!-- 无 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 3
                    "
                  >
                    <span>无</span>
                  </div>
                  <!-- 有单 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 2
                    "
                  >
                    <span>{{
                      scope.row.allStaffSchedulingVoList[index]
                        .allStaffSchedulingWorkOrderVoList
                        ? scope.row.allStaffSchedulingVoList[index]
                            .allStaffSchedulingWorkOrderVoList.length + "单"
                        : ""
                    }}</span>
                  </div>
                  <!-- 不可约（包含请假和休息日） -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus ==
                        1 ||
                        scope.row.allStaffSchedulingVoList[index].staffStatus ==
                          4
                    "
                  >
                    <img src="./imgs/1.png" style="vertical-align:middle" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 搜索排班 -->
          <div class="table2Box" v-if="checkModel === '4'">
            <el-table
              :data="table4Data"
              border
              style="width:100%;"
              :cell-class-name="changeTrStyle"
              @cell-click="cellClick"
              class="table2"
              ref="table2"
              id="table2Id"
              highlight-current-row
              @current-change="handleCurrentChangeMonth"
            >
              <el-table-column prop="name" label="姓名/时间" width="100" fixed>
                <template slot-scope="scope">
                  {{ scope.row.staffName }}
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, index) in table4Data[0].allStaffSchedulingVoList"
                :key="index"
                :label="
                  `${moment(item.day).month() + 1}-${moment(item.day).date()}`
                "
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <!-- 无 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 3
                    "
                  >
                    <span>无</span>
                  </div>
                  <!-- 有单 -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus == 2
                    "
                  >
                    <span>{{
                      scope.row.allStaffSchedulingVoList[index]
                        .allStaffSchedulingWorkOrderVoList
                        ? scope.row.allStaffSchedulingVoList[index]
                            .allStaffSchedulingWorkOrderVoList.length + "单"
                        : ""
                    }}</span>
                  </div>
                  <!-- 不可约（包含请假和休息日） -->
                  <div
                    v-if="
                      scope.row.allStaffSchedulingVoList[index].staffStatus ==
                        1 ||
                        scope.row.allStaffSchedulingVoList[index].staffStatus ==
                          4
                    "
                  >
                    <img src="./imgs/1.png" style="vertical-align:middle" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <table-1-dialog
      :detailList="detailList"
      :isShow="table1DialogIsShow"
      @changeFalse="changeFalsetable1"
    >
    </table-1-dialog>
  </div>
</template>

<script>
// import { table1Data, weekOptions } from './mockData'
import { currentWeek, getCurrMonthDays, getToday } from "./utils";
import moment from "moment";
import Table1Dialog from "./table1Dialog.vue";
export default {
  inject: ["reload"],
  data() {
    return {
      table1Data: [
        // 周排班数据
        {
          allStaffSchedulingVoList: []
        }
      ],
      table2Data: [
        // 月排班数据
        {
          allStaffSchedulingVoList: []
        }
      ],
      table3Data: [
        // 日排班数据
        {
          allStaffSchedulingVoList: []
        }
      ],
      table4Data: [
        // 搜索排班数据
        {
          allStaffSchedulingVoList: []
        }
      ],
      weekOptions: [],
      checkModel: "1", // 选择的查看模式（1-日  2-周 3-月 4-搜索模式）
      weekstartTime: "",
      weekendTime: "",
      monthstarttime: "",
      monthendtime: "",
      daystarttime: "",
      searchStaffName: "", // 查询的员工姓名
      detailList: [],
      table1DialogIsShow: false,
      currentRowDay: null, // 日当前行
      currentRowWeek: null, //周当前行
      currentRowMonth: null, //年当前行
      isloading: false,
      cityAndBusinessOptions: [], // 城市和商圈枚举
      currentBusinessOptions: [], // 当前商圈枚举
      goodsListOptions: [], // 商品枚举
      chooseCityCode: "",
      chooseBusinessCode: "",
      chooseGoodsCode: "",
      staffPhone: "",
      rangeTime: ["", ""]
    };
  },
  components: {
    Table1Dialog
  },
  computed: {
    goBackText() {
      if (this.checkModel === "1") {
        return "回到今日";
      }
      if (this.checkModel === "2") {
        return "回到本周";
      }
      if (this.checkModel === "3") {
        return "回到本月";
      }
    }
  },
  methods: {
    changeModel(model) {
      // 切换查看模式  日 周 月
      this.checkModel = model;
      // 清除搜索条件
      this.clearSearchValue();
      // 重置当前模式的默认时间范围
      if (this.checkModel === "1") {
        const { daystarttime } = getToday();
        this.daystarttime = daystarttime;
        this.initData();
      }
      if (this.checkModel === "2") {
        const { weekStartTime, weekEndTime } = currentWeek();
        this.weekstartTime = weekStartTime;
        this.weekendTime = weekEndTime;
        this.initDataWeek();
      }
      if (this.checkModel === "3") {
        const { monthstarttime, monthendtime } = getCurrMonthDays();
        this.monthstarttime = monthstarttime;
        this.monthendtime = monthendtime;
        this.initDataMonth();
      }
    },
    async weekPrev() {
      // 上一周
      const weekstartTime = moment(this.weekstartTime)
        .subtract("7", "days")
        .format("YYYY-MM-DD");
      const weekendTime = moment(this.weekendTime)
        .subtract("7", "days")
        .format("YYYY-MM-DD");
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: weekstartTime,
          endTime: weekendTime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table1Data = data;
        }
        if (data.length == 0) {
          this.$message.error("暂无排班信息");
          return false;
        }
        this.weekstartTime = weekstartTime;
        this.weekendTime = weekendTime;
      });
    },
    async weekNext() {
      // 下一周
      const weekstartTime = moment(this.weekstartTime)
        .add("7", "days")
        .format("YYYY-MM-DD");
      const weekendTime = moment(this.weekendTime)
        .add("7", "days")
        .format("YYYY-MM-DD");
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: weekstartTime,
          endTime: weekendTime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table1Data = data;
        }
        if (data.length == 0) {
          this.$message.error("暂无排班信息");
          return false;
        }
        this.weekstartTime = weekstartTime;
        this.weekendTime = weekendTime;
      });
    },
    async monthPrev() {
      // 上一月
      const monthstarttime = moment(new Date(this.monthstarttime))
        .subtract(1, "months")
        .startOf("month")
        .format("YYYY-MM-DD");
      const monthendtime = moment(new Date(this.monthendtime))
        .subtract(1, "months")
        .endOf("month")
        .format("YYYY-MM-DD");
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: monthstarttime,
          endTime: monthendtime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table2Data = data;
        }
        if (data.length == 0) {
          this.$message.error("暂无排班信息");
          return false;
        }
        this.monthstarttime = monthstarttime;
        this.monthendtime = monthendtime;
      });
    },
    async monthNext() {
      // 下一月
      const monthstarttime = moment(new Date(this.monthstarttime))
        .add(1, "months")
        .startOf("month")
        .format("YYYY-MM-DD");
      const monthendtime = moment(new Date(this.monthendtime))
        .add(1, "months")
        .endOf("month")
        .format("YYYY-MM-DD");
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: monthstarttime,
          endTime: monthendtime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table2Data = data;
        }
        if (data.length == 0) {
          this.$message.error("暂无排班信息");
          return false;
        }
        this.monthstarttime = monthstarttime;
        this.monthendtime = monthendtime;
      });
    },
    async dayPrev() {
      // 昨天
      const daystarttime = moment(new Date(this.daystarttime))
        .subtract(1, "days")
        .format("YYYY-MM-DD");
      this.isloading = true;
      const res = await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "0",
          day: daystarttime
        }
      });
      this.isloading = false;
      if (res.data.length > 0) {
        this.table3Data = res.data;
      }
      if (res.data.length == 0) {
        this.$message.error("暂无排班信息");
        return false;
      }
      this.daystarttime = daystarttime;
    },
    async dayNext() {
      const daystarttime = moment(new Date(this.daystarttime))
        .add(1, "days")
        .format("YYYY-MM-DD");
      this.isloading = true;
      const res = await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "0",
          day: daystarttime
        }
      });
      this.isloading = false;
      if (res.data.length > 0) {
        this.table3Data = res.data;
      }
      if (res.data.length == 0) {
        this.$message.error("暂无排班信息");
        return false;
      }
      this.daystarttime = daystarttime;
    },
    async goBackCurrent() {
      // 回到本周 今日 本月
      if (this.checkModel === "2") {
        // 周模式
        this.isloading = true;
        const { weekStartTime, weekEndTime } = currentWeek();
        const res = await this.$http({
          url:
            "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
          method: "get",
          params: {
            query: "1",
            startTime: weekStartTime,
            endTime: weekEndTime
          }
        });
        if (res.data.length > 0) {
          this.weekstartTime = weekStartTime;
          this.weekendTime = weekEndTime;
          this.table1Data = res.data;
        }
        this.isloading = false;
      }
      if (this.checkModel === "3") {
        // 月模式
        this.isloading = true;
        const { monthstarttime, monthendtime } = getCurrMonthDays();
        const res = await this.$http({
          url:
            "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
          method: "get",
          params: {
            query: "1",
            startTime: monthstarttime,
            endTime: monthendtime
          }
        });
        if (res.data.length > 0) {
          this.monthstarttime = monthstarttime;
          this.monthendtime = monthendtime;
          this.table2Data = res.data;
        }
        this.isloading = false;
      }
      if (this.checkModel === "1") {
        // 日模式
        this.isloading = true;
        const { daystarttime } = getToday();
        const res = await this.$http({
          url:
            "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
          method: "get",
          params: {
            query: "0",
            day: this.daystarttime
          }
        });
        if (res.data.length > 0) {
          this.daystarttime = daystarttime;
          this.table3Data = res.data;
        }
        this.isloading = false;
      }
    },
    changeTrStyle({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
      let progressRate = row.allStaffSchedulingVoList;
      if (columnIndex > 0) {
        const currentIndex = columnIndex - 1;
        switch (progressRate[currentIndex].staffStatus) {
          case "1":
            return "bukeyue";
            break;
          case "4":
            return "bukeyue";
            break;
          case "2":
            return "youdan";
            break;
          case "3":
            return "wu";
            break;
        }
      }
    },
    cellClick(row, column, cell, event) {
      // alert(`行:${row.index} 列：${column.index}`)
      if (column.index == 0) {
        return false;
      }
      this.detailList =
        row.allStaffSchedulingVoList[
          column.index - 1
        ].allStaffSchedulingWorkOrderVoList;
      if (!this.detailList) {
        this.$message.error("请点击有单子的查看详情");
        return false;
      }
      this.table1DialogIsShow = true;
    },
    changeFalsetable1(data) {
      this.table1DialogIsShow = data;
    },
    async initData() {
      this.isloading = true;
      const res = await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "0",
          day: this.daystarttime
        }
      });
      //console.log(res);
      if (res.data.length > 0) {
        this.isloading = false;
        this.table3Data = res.data;
      }
    },
    handleCurrentChangeDay(value) {
      this.currentRowDay = value;
    },
    handleCurrentChangeWeek(value) {
      this.currentRowWeek = value;
    },
    handleCurrentChangeMonth(value) {
      this.currentRowMonth = value;
    },
    setCurrent(row) {
      // 判断是日模式 周模式 月模式
      if (this.checkModel === "1") {
        this.$refs.table3.setCurrentRow(row);
      }
      if (this.checkModel === "2") {
        this.$refs.table1.setCurrentRow(row);
      }
      if (this.checkModel === "3") {
        this.$refs.table2.setCurrentRow(row);
      }
    },
    searchPeople() {
      if (this.searchStaffName === "") {
        this.$message.error("请输入员工姓名");
        return false;
      }
      let searchList = [];
      if (this.checkModel == "1") {
        // 日模式
        let refTab = this.$refs.table3;
        let refdata = refTab.data;
        //console.log(refTab);
        for (let i = 0; i < refdata.length; i++) {
          if (refdata[i].hasOwnProperty("staffName")) {
            var tableIdLocation = refdata
              .map(item => item.staffName)
              .indexOf(this.searchStaffName);
          }
        }
        if (tableIdLocation == -1) {
          this.$message.error("查询不到此员工，请输入正确的员工姓名");
          return false;
        }
        this.setCurrent(refdata[tableIdLocation]);
        let myTableId = document.getElementById("table3Id").childNodes;
        let myTableIdChildNo3 = myTableId[2].childNodes;
        //console.log(myTableIdChildNo3);
        let myTableIdChildNo3ChildNo1 = myTableIdChildNo3[0].childNodes;
        let tbobyChildNo2 = myTableIdChildNo3ChildNo1[1];
        let kk = tbobyChildNo2.childNodes;
        let kkll = kk[tableIdLocation];
        kkll.setAttribute("id", "table_td_bg");
        let element = document.getElementById("table_td_bg");
        element.scrollIntoView({ block: "center" });
      }
      if (this.checkModel == "2") {
        // 周模式
        let refTab = this.$refs.table1;
        let refdata = refTab.data;
        //console.log(refdata);
        for (let i = 0; i < refdata.length; i++) {
          if (refdata[i].hasOwnProperty("staffName")) {
            var tableIdLocation = refdata
              .map(item => item.staffName)
              .indexOf(this.searchStaffName);
          }
        }
        if (tableIdLocation == -1) {
          this.$message.error("查询不到此员工，请输入正确的员工姓名");
          return false;
        }
        this.setCurrent(refdata[tableIdLocation]);
        let myTableId = document.getElementById("table1Id").childNodes;
        let myTableIdChildNo3 = myTableId[2].childNodes;
        //console.log(myTableIdChildNo3);
        let myTableIdChildNo3ChildNo1 = myTableIdChildNo3[0].childNodes;
        let tbobyChildNo2 = myTableIdChildNo3ChildNo1[1];
        let kk = tbobyChildNo2.childNodes;
        let kkll = kk[tableIdLocation];
        kkll.setAttribute("id", "table_td_bg");
        let element = document.getElementById("table_td_bg");
        element.scrollIntoView({ block: "center" });
      }
      if (this.checkModel == "3") {
        // 月模式
        let refTab = this.$refs.table2;
        let refdata = refTab.data;
        //console.log(refdata);
        for (let i = 0; i < refdata.length; i++) {
          if (refdata[i].hasOwnProperty("staffName")) {
            var tableIdLocation = refdata
              .map(item => item.staffName)
              .indexOf(this.searchStaffName);
          }
        }
        if (tableIdLocation == -1) {
          this.$message.error("查询不到此员工，请输入正确的员工姓名");
          return false;
        }
        this.setCurrent(refdata[tableIdLocation]);
        let myTableId = document.getElementById("table2Id").childNodes;
        let myTableIdChildNo3 = myTableId[2].childNodes;
        //console.log(myTableIdChildNo3);
        let myTableIdChildNo3ChildNo1 = myTableIdChildNo3[0].childNodes;
        let tbobyChildNo2 = myTableIdChildNo3ChildNo1[1];
        let kk = tbobyChildNo2.childNodes;
        let kkll = kk[tableIdLocation];
        kkll.setAttribute("id", "table_td_bg");
        let element = document.getElementById("table_td_bg");
        element.scrollIntoView({ block: "center" });
      }
    },
    async initDataWeek() {
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: this.weekstartTime,
          endTime: this.weekendTime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table1Data = data;
        }
      });
    },
    async initDataMonth() {
      this.isloading = true;
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: {
          query: "1",
          startTime: this.monthstarttime,
          endTime: this.monthendtime
        }
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length > 0) {
          this.table2Data = data;
        }
      });
    },
    async getCityAndBusinessOptions() {
      const { data } = await this.$http({
        url: "/hsssystemadmin/v1/businessManagement/getCityAreaList",
        method: "get"
      });
      if (data.length == 0) {
        this.$message.error("城市和商圈枚举获取失败");
      }
      this.cityAndBusinessOptions = data;
    },
    getBusinessOptions() {
      if (!this.chooseCityCode) {
        this.$message.error("请先选择城市");
        return false;
      }
      this.currentBusinessOptions = this.cityAndBusinessOptions.find(
        item => item.cityCode == this.chooseCityCode
      ).areas;
    },
    async getGoodsOptions() {
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchGoodsList",
        method: "get"
      }).then(res => {
        console.log(res);
        const { data } = res;
        this.goodsListOptions = data;
      });
    },
    async searchTable() {
      if (this.rangeTime[0] == "" || this.rangeTime[1] == "") {
        this.$message.error("请选择开始时间和结束时间");
        return false;
      }
      this.checkModel = "4";
      const data = {
        query: "1",
        staffName: this.searchStaffName,
        staffPhone: this.staffPhone,
        cityCode: this.chooseCityCode,
        businessCode: this.chooseBusinessCode,
        goodsCode: this.chooseGoodsCode,
        startTime: this.rangeTime[0],
        endTime: this.rangeTime[1]
      };
      this.isloading = true;
      this.$http({
        url: "/staffadmin/homeService/staffManager/fetchAllStaffSchedulingList",
        method: "get",
        params: data
      }).then(res => {
        this.isloading = false;
        const { data } = res;
        if (data.length == 0) {
          this.$message.error("暂无排班信息");
          this.table4Data = [
            {
              allStaffSchedulingVoList: []
            }
          ];
        } else {
          this.table4Data = data;
        }
      });
    },
    clearSearchValue() {
      // 清空搜索条件
      this.chooseCityCode = "";
      this.chooseBusinessCode = "";
      this.chooseGoodsCode = "";
      this.searchStaffName = "";
      this.staffPhone = "";
      this.rangeTime = ["", ""];
    }
  },
  activated() {
    // 获取当前周的开始和结束时间（模式默认为周）
    // const { weekStartTime, weekEndTime} = currentWeek()
    // this.weekstartTime = weekStartTime
    // this.weekendTime =
    // 默认模式改为天
    const { daystarttime } = getToday();
    this.daystarttime = daystarttime;
    this.initData();
    this.getCityAndBusinessOptions();
    this.getGoodsOptions();
  },
  watch: {
    rangeTime: {
      handler(newvalue) {
        if (newvalue == null) {
          this.rangeTime = ["", ""];
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-loading-spinner i {
  color: #fc9e76;
}
/deep/ .el-loading-spinner .el-loading-text {
  color: #fc9e76;
  margin: 3px 0;
  font-size: 14px;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  .topImg {
    margin-right: 20px;
  }
}
.week,
.month,
.day {
  display: flex;
  margin: 0 10px;
}
.tableTop1 {
  padding: 0 10px 0 10px;
  height: 56px;
  line-height: 56px;
  border: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /deep/ .top1Left {
    height: 56px;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .titleLeft {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 900;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 20px;
    }
    .el-input__inner {
      font-size: 12px;
      height: 32px;
      width: 100px;
      padding-left: 8px;
    }
    .el-input__icon {
      line-height: 32px;
      height: 32px;
    }
    .el-popper[x-placement^="bottom"] {
      margin-top: -6px !important;
      .el-select-dropdown__empty {
        line-height: 18px;
      }
    }
  }
  .top1Right {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    .checkGroup {
      span {
        cursor: pointer;
        margin-right: 15px;
      }
    }
  }
}
.tableTop2 {
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  height: 56px;
  line-height: 56px;
  padding: 0 20px;
  .staffName {
    font-size: 14px;
  }
}
</style>
<style lang="scss" scoped>
.checkColor {
  color: #ff7f4c;
}
/deep/ .el-table tr td.bukeyue {
  background: #f0f2f5;
  opacity: 0.9;
}
/deep/ .el-table tr td.youdan {
  background: rgba(255, 128, 67, 0.12);
  // opacity: 0.12;
  span {
    color: #fa541c;
  }
}
/deep/ .el-table tr td.wu {
  background: #fff;
  opacity: 0.9;
}
/deep/ .el-table tr td {
  height: 37px;
  padding-top: 0;
  padding-bottom: 0;
}
/deep/ .el-table tr th {
  height: 37px;
  padding-top: 0;
  padding-bottom: 0;
}
/deep/ .table3 {
  font-size: 12px;
  font-weight: 400;
  .cell {
    padding-left: 0;
    padding-right: 0;
  }
  .cell.el-tooltip {
    min-width: 40px;
  }
}
/deep/ .table1 {
  font-size: 12px;
  font-weight: 400;
  .cell {
    padding-left: 0;
    padding-right: 0;
  }
  .cell.el-tooltip {
    min-width: 40px;
  }
}
/deep/ .table2 {
  font-size: 12px;
  font-weight: 400;
  .cell {
    padding-left: 0;
    padding-right: 0;
  }
  .cell.el-tooltip {
    min-width: 40px;
  }
}
.contentBox {
  // padding: 0 10px;
  border: 10px solid #ebeef1;
  border-radius: 10px;
}
.contentView {
  padding: 20px 20px 0 20px;
}
.el-icon-search {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
/deep/ .staffInput {
  height: 56px;
  width: 100px;
  .el-input__inner {
    height: 32px;
    width: 100px;
    padding: 0 5px;
  }
}
/deep/ .chooseDate {
  width: 250px;
}
/deep/ .searchButton {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-left: 15px;
}
</style>
